window.onload = function () {
    var imgSrcs = []
    var prevBt = document.getElementById('prev')
    var nextBt = document.getElementById('next')
    var pic = document.getElementById('picture')
    var buttons = document.getElementById('buttonList').getElementsByTagName('li')
    var container = document.getElementById('nav_list')
    var PREV_HANDLER = false
    var NEXT_HANDLER = true
    var cur = 1
    var i = 0
    for (i = 0; i < 4; i++) {
        imgSrcs.push('./img/' + (i + 1) + '.jpg')
        ;(function (index) {
            buttons[index].addEventListener('click', function () {
                var prevIndex = cur
                cur = index + 1
                buttons[prevIndex - 1].classList.toggle('curIndex')
                buttons[cur - 1].classList.toggle('curIndex')
                pic.src = imgSrcs[cur - 1]
            })
        })(i)
    }
    var handler = function (flag) {
        var prevIndex = cur
        if (flag === PREV_HANDLER) {
            if (cur === 1) {
                cur = 4
            } else {
                cur--
            }
        } else {
            if (cur === 4) {
                cur = 1
            } else {
                cur++
            }
        }
        buttons[prevIndex - 1].classList.toggle('curIndex')
        buttons[cur - 1].classList.toggle('curIndex')
        pic.src = imgSrcs[cur - 1]
    }
    var prevBtHandler = handler.bind(null, PREV_HANDLER)
    var nextBthandler = handler.bind(null, NEXT_HANDLER)
    prevBt.addEventListener('click', prevBtHandler, false)
    nextBt.addEventListener('click', nextBthandler, false)
    timer = setInterval(nextBthandler, 3000)
    container.addEventListener('mouseenter', function () {
        if (timer) {
            clearInterval(timer)
        }
    })
    container.addEventListener('mouseleave', function () {
        timer = setInterval(nextBthandler, 3000)
    })
}
